<template>
  <div style="background: #F0F2F5;">
    <div class="ExportDissuasionAnalysis">
      <commonSearch @onQuery="onQuery" @onReset="onReset" @onDownload="onDownload" />
      <a-row :gutter="24" style="margin-top:10px;">
        <a-card title="劝阻概览" class="box1">
          <a-col :sm="24" :md="4" :xl="6">
            <chart-card
              :loading="loading"
              title="预警总数"
              :total="overviewData.warningData.periodValue | NumberFormat"
            >
              <template slot="footer"
                >环比
                <a-icon
                  v-if="overviewData.warningData.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="overviewData.warningData.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="overviewData.warningData.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="overviewData.warningData.moMRatio == '-'">--</span>
                <span class="m1" v-if="overviewData.warningData.moMRatio != '-'">
                  {{ Math.abs(overviewData.warningData.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1"> {{ Math.abs(overviewData.warningData.moMValue) | NumberFormat }}</span></template
              >
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="6">
            <chart-card
              :loading="loading"
              title="已劝阻"
              :total="overviewData.dissuadedData.periodValue | NumberFormat"
            >
              <template slot="footer"
                >环比
                <a-icon
                  v-if="overviewData.dissuadedData.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="overviewData.dissuadedData.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="overviewData.dissuadedData.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="overviewData.dissuadedData.moMRatio == '-'">--</span>
                <span class="m1" v-if="overviewData.dissuadedData.moMRatio != '-'">
                  {{ Math.abs(overviewData.dissuadedData.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1"> {{ Math.abs(overviewData.dissuadedData.moMValue) | NumberFormat }}</span></template
              >
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="6">
            <chart-card
              :loading="loading"
              title="未劝阻"
              :total="overviewData.notDissuadedData.periodValue | NumberFormat"
            >
              <template slot="footer"
                >环比
                <a-icon
                  v-if="overviewData.notDissuadedData.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="overviewData.notDissuadedData.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="overviewData.notDissuadedData.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="overviewData.notDissuadedData.moMRatio == '-'">--</span>
                <span class="m1" v-if="overviewData.notDissuadedData.moMRatio != '-'">
                  {{ Math.abs(overviewData.notDissuadedData.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1"> {{ Math.abs(overviewData.notDissuadedData.moMValue) | NumberFormat }}</span></template
              >
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="6">
            <chart-card
              :loading="loading"
              title="超期"
              :total="overviewData.overDueDissuadedData.periodValue | NumberFormat"
            >
              <template slot="footer"
                >环比
                <a-icon
                  v-if="overviewData.overDueDissuadedData.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="overviewData.overDueDissuadedData.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="overviewData.overDueDissuadedData.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="overviewData.overDueDissuadedData.moMRatio == '-'">--</span>
                <span class="m1" v-if="overviewData.overDueDissuadedData.moMRatio != '-'">
                  {{ Math.abs(overviewData.overDueDissuadedData.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1">
                  {{ Math.abs(overviewData.overDueDissuadedData.moMValue) | NumberFormat }}</span
                ></template
              >
            </chart-card>
          </a-col>
        </a-card>
      </a-row>
      <a-row :gutter="24" style="margin-top:10px;">
        <a-card title="占比概况" class="box2">
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="劝阻状态占比" id="ExportDissuasionAnalysis1-1">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-1', '劝阻分析-劝阻状态占比')"
              />
              <smEmbedPie
                v-if="option1.data.length > 0"
                :data="option1.data"
                :color="option1.color"
                :legendRight="option1.legendRight"
                :itemGap="option1.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="false"
                :labelLine="true"
                style="height:300px;"
              ></smEmbedPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="预警屏蔽占比" id="ExportDissuasionAnalysis1-2">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-2', '劝阻分析-预警屏蔽占比')"
              />
              <smPie
                v-if="option2.data.length > 0"
                :data="option2.data"
                :color="option2.color"
                :legendRight="option2.legendRight"
                :itemGap="option2.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="false"
                :labelLine="true"
                style="height:300px;"
              ></smPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="处置方式占比" id="ExportDissuasionAnalysis1-3">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-3', '劝阻分析-处置方式占比')"
              />
              <smPie
                v-if="option3.data.length > 0"
                :data="option3.data"
                :color="option3.color"
                :legendRight="option3.legendRight"
                :itemGap="option3.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="false"
                :labelLine="true"
                style="height:300px;"
              ></smPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="反馈情况占比" id="ExportDissuasionAnalysis1-4">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-4', '劝阻分析-反馈情况占比')"
              />
              <smEmbedPie
                v-if="option4.data.length > 0"
                :data="option4.data"
                :color="option4.color"
                :legendRight="option4.legendRight"
                :itemGap="option4.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="true"
                :labelLine="true"
                style="height:300px;"
              ></smEmbedPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="未接原因占比" id="ExportDissuasionAnalysis1-5">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-5', '劝阻分析-未接原因占比')"
              />
              <smPie
                v-if="option5.data.length > 0"
                :data="option5.data"
                :color="option5.color"
                :legendRight="option5.legendRight"
                :itemGap="option5.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="true"
                :labelLine="true"
                style="height:300px;"
              ></smPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="已接情况占比" id="ExportDissuasionAnalysis1-6">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis1-6', '劝阻分析-已接情况占比')"
              />
              <smPie
                v-if="option6.data.length > 0"
                :data="option6.data"
                :color="option6.color"
                :legendRight="option6.legendRight"
                :itemGap="option6.itemGap"
                legendType="scroll"
                legendLabelSuffix
                :hollow="true"
                :labelLine="true"
                style="height:300px;"
              ></smPie>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
        </a-card>
      </a-row>
    </div>
    <div class="ExportDissuasionAnalysis">
      <a-row :gutter="24" style="margin-top:10px;">
        <a-card title="趋势概况" class="box2">
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="反馈情况趋势" id="ExportDissuasionAnalysis2-1">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-1', '劝阻分析-反馈情况趋势')"
              />
              <div class="radioBox">
                <a-radio-group @change="onQZGKChange" v-model="tabIndex">
                  <a-radio-button value="1">
                    已电话联系
                  </a-radio-button>
                  <a-radio-button value="2">
                    未电话联系
                  </a-radio-button>
                </a-radio-group>
              </div>
              <smLine
                style="height:270px;"
                v-if="lineOption1.data.length > 0"
                :data="lineOption1.data"
                :color="lineOption1.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="劝阻状态趋势" id="ExportDissuasionAnalysis2-2">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-2', '劝阻分析-劝阻状态趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption2.data.length > 0"
                :data="lineOption2.data"
                :color="lineOption2.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="处置方式趋势" id="ExportDissuasionAnalysis2-3">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-3', '劝阻分析-处置方式趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption3.data.length > 0"
                :data="lineOption3.data"
                :color="lineOption3.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="未接原因趋势" id="ExportDissuasionAnalysis2-4">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-4', '劝阻分析-未接原因趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption4.data.length > 0"
                :data="lineOption4.data"
                :color="lineOption4.color"
                legend
                legendPositon="right"
              />
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="已接情况趋势" id="ExportDissuasionAnalysis2-5">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-5', '劝阻分析-已接情况趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption5.data.length > 0"
                :data="lineOption5.data"
                :color="lineOption5.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="预警屏蔽趋势" id="ExportDissuasionAnalysis2-6">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-6', '劝阻分析-预警屏蔽趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption6.data.length > 0"
                :data="lineOption6.data"
                :color="lineOption6.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="回访次数趋势" id="ExportDissuasionAnalysis2-7">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-7', '劝阻分析-回访次数趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption7.data.length > 0"
                :data="lineOption7.data"
                :color="lineOption7.color"
                splitLine
              />
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="止损金额概况趋势" id="ExportDissuasionAnalysis2-8">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-8', '劝阻分析-止损金额概况趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption8.data.length > 0"
                :data="lineOption8.data"
                :color="lineOption8.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="人工核验归属地概况趋势" id="ExportDissuasionAnalysis2-9">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-9', '劝阻分析-人工核验归属地概况趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption9.data.length > 0"
                :data="lineOption9.data"
                :color="lineOption9.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <a-card title="反馈验证概况趋势" id="ExportDissuasionAnalysis2-10">
              <a-icon
                slot="extra"
                type="download"
                style="color:#BFBFBF;font-size: 20px;"
                @click="download('#ExportDissuasionAnalysis2-10', '劝阻分析-反馈验证概况趋势')"
              />
              <smLine
                style="height:300px;"
                v-if="lineOption10.data.length > 0"
                :data="lineOption10.data"
                :color="lineOption10.color"
                legend
                legendPositon="right"
              ></smLine>
              <p class="noData" v-else><a-empty /></p>
            </a-card>
          </a-col>
        </a-card>
      </a-row>
    </div>
  </div>
</template>
<script>
import exportHandle from '@/utils/export-util/pdf-canvas'
import ChartCard from '@/components/ChartCard'
import smPie from '@/components/echarts/smPie.vue'
import smEmbedPie from '@/components/echarts/smEmbedPie.vue'
import smLine from '@/components/echarts/smLine.vue'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
import config from '@/defaultSettings'
import commonSearch from '.././components/commonSearch'
import {
  getOverview,
  getDissuadeStateProportion,
  getWarningShieldProportion,
  getDisposalProportion,
  getFeedbackProportion,
  getMissedCallProportion,
  getReceivedCallProportion,
  getFeedbackTrend,
  getDissuadeStateTrend,
  getDisposalTrend,
  getMissedCallTrend,
  getReceivedCallTrend,
  getWarningShieldTrend,
  getReturnVisitsTrend,
  getStopLossAmountTrend,
  getManualVerifyAttributionTrend,
  getFeedbackVerifyTrend
} from '@/api/dataKanban/dissuadeAnalysis.js'
export default {
  components: {
    ChartCard,
    smPie,
    smEmbedPie,
    smLine,
    JAreaLinkage,
    commonSearch
  },
  data() {
    return {
      loading: true,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      queryParam: {
        warningTimeType: '2',
        xzqh: undefined
      },
      overviewData: {
        warningData: { moMValue: 10 },
        dissuadedData: { moMValue: 0 },
        notDissuadedData: { moMValue: -4 },
        overDueDissuadedData: { moMValue: 0 }
      },
      option1: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      option2: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      option3: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      option4: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      option5: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      option6: {
        data: [],
        legendRight: '260',
        color: config.echarts_base_color2,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      lineOption1: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption2: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption3: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption4: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption5: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption6: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption7: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption8: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption9: {
        data: [],
        color: config.echarts_base_color2
      },
      lineOption10: {
        data: [],
        color: config.echarts_base_color2
      },
      tabIndex: '1', //默认选中第一个
      dataArr: []
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    getAllData() {
      this.loading = !this.loading
      this.getOverViewData()
      this.getPieData1()
      this.getPieData2()
      this.getPieData3()
      this.getPieData4()
      this.getPieData5()
      this.getPieData6()
      this.getLineData1()
      this.getLineData2()
      this.getLineData3()
      this.getLineData4()
      this.getLineData5()
      this.getLineData6()
      this.getLineData7()
      this.getLineData8()
      this.getLineData9()
      this.getLineData10()
    },
    getOverViewData() {
      getOverview(this.queryParam)
        .then(res => {
          if (res.success) {
            this.overviewData = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getPieData1() {
      getDissuadeStateProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option1.data = []
            let arr = res.result
            // let arr = this.getEmbedPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option1, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getPieData2() {
      getWarningShieldProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option2.data = []
            let arr = res.result
            // let arr = this.getPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option2, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getPieData3() {
      getDisposalProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option3.data = []
            let arr = res.result
            // let arr = this.getPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option3, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getPieData4() {
      getFeedbackProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option4.data = []
            let arr = res.result
            // let arr = this.getEmbedPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option4, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getPieData5() {
      getMissedCallProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option5.data = []
            let arr = res.result
            // let arr = this.getPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option5, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getPieData6() {
      getReceivedCallProportion(this.queryParam)
        .then(res => {
          if (res.success) {
            this.option6.data = []
            let arr = res.result
            // let arr = this.getPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.option6, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData1() {
      getFeedbackTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.dataArr = res.result
            // this.dataArr = this.getMlineTestData1()
            if (this.dataArr != null) {
              this.setData()
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    setData() {
      this.lineOption1.data = []
      let list = []
      if (this.dataArr[0] != null && this.dataArr[0].length > 0 && this.tabIndex == 1) {
        this.dataArr[0].map((item, index) => {
          let obj = {
            product: item.date
          }
          item.points.map(count => {
            obj[count.typeName] = count.count
          })
          list.push(obj)
        })
      }
      if (this.dataArr[1] != null && this.dataArr[1].length > 0 && this.tabIndex == 2) {
        this.dataArr[1].map((item, index) => {
          let obj = {
            product: item.date
          }
          item.points.map(count => {
            obj[count.typeName] = count.count
          })
          list.push(obj)
        })
      }
      this.lineOption1.data = list
    },
    getLineData2() {
      getDissuadeStateTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption2.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption2.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData3() {
      getDisposalTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption3.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption3.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData4() {
      getMissedCallTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption4.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption4.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData5() {
      getReceivedCallTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption5.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption5.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData6() {
      getWarningShieldTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption6.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption6.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData7() {
      getReturnVisitsTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption7.data = []
            let arr = res.result
            // let arr = this.getSLineTestData()
            let list = []
            if (arr != null && arr.length > 0) {
              arr.map(item => {
                list.push({
                  product: item.date,
                  数量: item.count
                })
              })
              this.lineOption7.data = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData8() {
      getStopLossAmountTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption8.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption8.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData9() {
      getManualVerifyAttributionTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption9.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption9.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getLineData10() {
      getFeedbackVerifyTrend(this.queryParam)
        .then(res => {
          if (res.success) {
            this.lineOption10.data = []
            let arr = res.result
            // let arr = this.getMLineTestData()
            this.lineOption10.data = this.changeMLineData(arr)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    changeMLineData(arr) {
      let list = []
      if (arr != null && arr.length > 0) {
        arr.map((item, index) => {
          let obj = {
            product: item.date
          }
          item.points.map(count => {
            obj[count.typeName] = count.count
          })
          list.push(obj)
        })
      }
      return list
    },
    onQZGKChange(e) {
      // console.log(e.target.value)
      this.tabIndex = e.target.value
      if (this.dataArr != null) {
        this.setData()
      }
    },
    onQuery(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onReset(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onDownload() {
      this.download('.ExportDissuasionAnalysis', '劝阻分析')
    },
    // 下载PDF
    // download(DomID, filename) {
    //   let refDom = document.querySelector(DomID)
    //   this.$nextTick(() => {
    //     exportHandle.exportPDF(refDom, filename)
    //   })
    // },
    // 下载PDF
    download(Dom, filename) {
      let refDom
      if (Dom.indexOf('#') != -1) {
        refDom = document.querySelector(Dom)
      } else {
        refDom = document.getElementsByClassName(Dom.replace('.', ''))
      }
      this.$nextTick(() => {
        exportHandle.exportPDF(refDom, filename)
      })
    },
    getPieData() {
      let arr = [
        {
          product: '双方都',
          count: 11,
          ratio: '10%'
        },
        {
          product: '发生的',
          count: 22,
          ratio: '20%'
        }
      ]
      return arr
    },
    getEmbedPieData() {
      let arr = [
        {
          product: '已劝阻',
          count: 4,
          children: [
            {
              product: '已劝阻',
              count: 4
            }
          ]
        },
        {
          product: '未劝阻',
          count: 4,
          children: [
            {
              product: '屏蔽劝阻',
              count: 3
            },
            {
              product: '超期',
              count: 1
            }
          ]
        }
      ]
      return arr
    },
    getSLineTestData() {
      let arr = [
        {
          date: '2021-1-1',
          count: '20',
          typeName: '11111'
        },
        {
          date: '2021-1-2',
          count: '100',
          typeName: '22222'
        },
        {
          date: '2021-1-3',
          count: '10',
          typeName: '33333'
        }
      ]
      return arr
    },
    getMLineTestData() {
      let arr = [
        {
          points: [
            {
              count: 1,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/24'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 6,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/25'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 8,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 3,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/26'
        },
        {
          points: [
            {
              count: 2,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 3,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/27'
        }
      ]
      return arr
    },
    getMlineTestData1() {
      let arr = [
        [
          {
            points: [
              {
                count: 1,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 10,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 4,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/24'
          },
          {
            points: [
              {
                count: 4,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 2,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 2,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/25'
          },
          {
            points: [
              {
                count: 2,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 5,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 9,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/26'
          }
        ],
        [
          {
            points: [
              {
                count: 1,
                type: 3,
                typeName: '劝诫'
              },
              {
                count: 1,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 8,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/24'
          },
          {
            points: [
              {
                count: 6,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 2,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 1,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/25'
          }
        ]
      ]
      return arr
    }
  }
}
</script>
<style lang="less" scoped>
// /deep/ .ant-layout-content{
//   overflow: hidden;
// }
/deep/ .box1 .ant-card-body {
  border: 1px solid #e8e8e8;
}
/deep/ .box2 .ant-card-body {
  border: none;
  .ant-card-bordered {
    border: none;
  }
}
// /deep/ .ant-card-body {
  // height: 100%;
// }

/deep/ .ant-card {
  height: 100%;
  margin: 0 12px;
}
// /deep/ .ant-card-body {
//   height: 100%;
//   border: 1px solid #ccc;
// }
/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/ .ant-card {
  height: 100%;
}
/deep/.chart-card-content {
  // display: none;
  height: 0;
}
/deep/.total {
  line-height: 54px;
  height: auto;
  span {
    display: block;
    text-align: center;
  }
}
/deep/.chart-card-header .meta,
/deep/.chart-card-footer {
  text-align: center;
  border: none;
  padding-top: 0;
}
.m1 {
  margin-left: 10px;
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/deep/.ant-col-xl-12 {
  height: 360px;
  overflow: hidden;
}
// .radioBox {
//   position: absolute;
//   top: 80px;
//   left: 50px;
//   z-index: 1;
// }
</style>
